<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台管理系统</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../static/css/font.css">
	<link rel="stylesheet" href="../static/css/weadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../static/js/app.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            background: #000;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        #cvs {
            background-color: #eee;
            z-index: -1;
            position : absolute;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body class="login-bg">
<canvas id="cvs"></canvas>
<div class="login">
    <div class="message">coc管理登录</div>
    <div id="darkbannerwrap"></div>

    <form method="post" class="layui-form" >
        <input name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" value="user2" >
        <hr class="hr15">
        <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input" value="123456">
        <hr class="hr15">
        <input class="loginin" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
        <hr class="hr20" >
    </form>
</div>

    <script type="text/javascript">

        	layui.extend({
				admin: '{/}../static/js/admin'
			});
            layui.use(['form','admin','jquery'], function(){
              var form = layui.form
              	,admin = layui.admin,$=layui.jquery;
              //监听提交
              form.on('submit(login)', function(data){
                  dologin(data);
                return false;
              });
            });
    </script>  
    <!-- 底部结束 -->

    <script type="text/javascript">
        var cvs = document.getElementById("cvs");
        var ctx = cvs.getContext("2d");
        var cw = cvs.width = document.body.clientWidth;
        var ch = cvs.height = document.body.clientHeight;
        //动画绘制对象
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        var codeRainArr = []; //代码雨数组
        var cols = parseInt(cw / 14); //代码雨列数
        var step = 16;    //步长，每一列内部数字之间的上下间隔
        ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑

        function createColorCv() {
            //画布基本颜色
            ctx.fillStyle = "#242424";
            ctx.fillRect(0, 0, cw, ch);
        }

        //创建代码雨
        function createCodeRain() {
            for (var n = 0; n < cols; n++) {
                var col = [];
                //基础位置，为了列与列之间产生错位
                var basePos = parseInt(Math.random() * 300);
                //随机速度 3~13之间
                var speed = parseInt(Math.random() * 10) + 3;
                //每组的x轴位置随机产生
                var colx = parseInt(Math.random() * cw)

                //绿色随机
                var rgbr = 0;
                var rgbg = parseInt(Math.random() * 255);
                var rgbb = 0;
                //ctx.fillStyle = "rgb("+r+','+g+','+b+")"

                for (var i = 0; i < parseInt(ch / step) / 2; i++) {
                    var code = {
                        x: colx,
                        y: -(step * i) - basePos,
                        speed: speed,
                        //  text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1  //随机生成0或者1
                        text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
                        color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
                    }
                    col.push(code);
                }
                codeRainArr.push(col);
            }
        }

        //代码雨下起来
        function codeRaining() {
            //把画布擦干净
            ctx.clearRect(0, 0, cw, ch);
            //创建有颜色的画布
            //createColorCv();
            for (var n = 0; n < codeRainArr.length; n++) {
                //取出列
                col = codeRainArr[n];
                //遍历列，画出该列的代码
                for (var i = 0; i < col.length; i++) {
                    var code = col[i];
                    if (code.y > ch) {
                        //如果超出下边界则重置到顶部
                        code.y = 0;
                    } else {
                        //匀速降落
                        code.y += code.speed;
                    }

                    //1 颜色也随机变化
                    //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 

                    //2 绿色逐渐变浅
                    // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 

                    //3 绿色随机
                    // var r= 0;
                    // var g= parseInt(Math.random()*255) + 3;
                    // var b= 0;
                    // ctx.fillStyle = "rgb("+r+','+g+','+b+")";

                    //4 一致绿
                    ctx.fillStyle = code.color;


                    //把代码画出来
                    ctx.fillText(code.text, code.x, code.y);
                }
            }
            requestAnimationFrame(codeRaining);
        }

        //创建代码雨
        createCodeRain();
        //开始下雨吧 GO>>
        requestAnimationFrame(codeRaining);
    </script>
</body>
</html>